<link rel="stylesheet" type="text/css" href="/Public/css/common/wangEditor.min.css">
<style>
    .row{margin-left: 0px;margin-right: 0px}
    body{font-size: 14px}
    .modal-content{width:450px;margin:auto}
    #rules { height: 300px; /*max-height: 500px;*/ }
    .container { width: 100%; margin: 0 auto; position: relative; }
    .wangEditor-menu-container{position:relative}
    .activity-image{position:absolute;left:150px;top:70px}
    .style .style-box{display: inline-block; margin-left:20px; }
    .style .box-border{border:2px red solid}
    .style .style-box img{width:40px; height:40px; margin:auto 0;}
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <present name="questionnaire">编辑<else/>新建</present>问卷测试
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a href="#basic">基础设置</a></li>
                        <li><a href="#audio">音效设置</a></li>
                        <li><a href="#push">推送设置</a></li>
                        <li><a href="#share">分享设置</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <form role="form" class="form-horizontal" action="{:U('User/Questionnaire/update')}" method="post" enctype="multipart/form-data" onsubmit="return formcheck();">
                        <input type="hidden" name="id" value="{$questionnaire['id']}">
                        <div class="tab-content">
                            <div class="tab-pane active" id="basic">
                                <include file="basic" />
                            </div>
                            <div class="tab-pane" id="audio">
                                <include file="audio" />
                            </div>
                            <div class="tab-pane" id="push">
                                <include file="push" />
                            </div>
                            <div class="tab-pane" id="share">
                                <include file="share" />
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="button" class="btn btn-default" onclick="history.go(-1)">返回列表</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/Public/js/common/check-upload-file.js"></script>
<script type="text/javascript" src="/Public/js/common/wangEditor.min.js"></script>
<script type="text/javascript" src="/Public/js/laydate/laydate.js"></script>
<script type="text/javascript">
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function(datas){
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function(datas){
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
    laydate.skin( "molv" );

    $(function () {
        $('#myTab a:first').tab('show');//初始化显示哪个tab

        $('#myTab a').click(function (e) {
            e.preventDefault();//阻止a链接的跳转行为
            $(this).tab('show');//显示当前选中的链接及关联的content
        })

        var audio = $("#audio_player")[0];
        $('#music_player').on('show.bs.modal', function () {
            audio.play();
        })

        $('#music_player').on('hide.bs.modal', function () {
            audio.pause();
        })

        var editor = new wangEditor('rules');
        editor.config.menus = [
            'bold',
            'underline',
            'italic',
            'forecolor',
            'bgcolor',
            'strikethrough',
            'eraser',
            'fontfamily',
            'fontsize',
            'head',
            'alignleft',
            'aligncenter',
            'alignright',
            'link',
            'unlink',
            'table',
            // 'emotion',
            // 'img',
            // 'video',
            // 'dynamicMap',
            'undo',
            'redo'
            //'fullscreen'
        ]
        editor.create();
    })

    function showAudio(){
        var background_music = $("input[name=background_music]").val();
        if(background_music){
            $("#audio_player").attr("src", background_music);
            $('#music_player').modal('show');
        }else{
            alert("暂无音频文件播放");
        }
    }

    function formcheck() {
        var ret = true;
        if(ret){
            $('#basic').find('.valid').each(function(){
                if($(this).val() == ""){
                    $("#myTab a:eq(0)").tab("show");
                    alert($(this).attr("title"));
                    ret = false;
                    return ret;
                }
            })
        }
        return ret;
    }

    function uploadImage(c, types, size, kb, isCheck, isImage){
        var img = c.files[0];
        var _this = $(c);
        var url = "/User/Questionnaire/uploadFile";
        checkFile(_this, img, types, size, kb, isCheck, isImage, url);
    }

    $('.style-box').click(function(){
        if(!$(this).hasClass("box-border")){
            $(this).siblings().removeClass("box-border");
            $(this).addClass("box-border");
            $("input[name=theme_color]").val($(this).index()+1);
        }
    });
</script>